<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>评价</title>	
		
		<style>
			/* 场馆星级 */
			.content .top{
				position: relative;
				padding: 15px;
			}
			.top .star-level{
				margin-bottom: 15px;
			}
			.star-level p{
				font-size: 14px;
				color: #b4b4b4;
			}
			.star-level .stars{
				margin-top: 10px;
			}
			.star-level .star{
				display: inline-block;
				width: 14px;
				height: 14px;
				margin-right: 5px;
				background-image: url(../images/icons/star_normal_uns.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.star-level .star.select{
				background-image: url(../images/icons/star_normal_s.png);
			}
			.star-level .grade{
				font-size: 14px;
				color: #42455c;
				vertical-align: top;
			}
			ul.star-item{
				padding: 0;
			}
			ul.star-item li{
				padding: 5px 0;
				font-size: 0;
			}
			.star-item .w{
				margin-right: 8px;
				font-size: 13px;
			}
			.star-item .star{
				display: inline-block;
				width: 10px;
				height: 10px;
				margin-right: 2px;
				background-image: url(../images/icons/star_small_uns.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.star-item .star.select{
				background-image: url(../images/icons/star_small_s.png);
			}
			.star-item .grade{
				font-size: 13px;
				margin-left: 5px;
			}
			span.b-position{
				position: absolute;
				bottom: 18px;
				right: 15px;
				font-size: 14px;
				color: #b4b4b4;
			}
			span.tot-evalu{
				margin: 0 1px;
				font-size: 15px;
			}
			/* 评价 */
			ul.main{
				padding: 0 15px;
				background-color: #fff;
				border-top: 1px solid #dcdcdc;
				border-bottom: 1px solid #dcdcdc;
			}
			.main li{
				padding: 7px 0;
				border-bottom: 1px solid #dcdcdc;
				overflow: hidden;
			}
			.main li:last-child{
				border-bottom: none;
			}
			.main li div{
				float: left;
			}
			.stu-avatar{
				width: 40px;
				height: 40px;
				margin-right: 10px;
				border: none;
				border-radius: 50%;
				-webkit-border-radius: 50%;
			}
			.stu-avatar img{
				width: 100%;
				height: 100%;
				border: none;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.stu{
				margin-top: 3px;
				width: 81%;
			}
			.stu-info{
				font-size: 13px;
				overflow: hidden;
			}
			.stu-info .name,
			.stu-info .stars{
				float: left;
			}
			.stu-info .name,
			.stu-info .date{
				color: #b4b4b4;
			}
			.stu-info .stars{
				margin-left: 15px;
			}
			.stu-info .star{
				display: inline-block;
				width: 13px;
				height: 13px;
				background-image: url(../images/icons/star_small_uns.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.stu-info .star.select{
				background-image: url(../images/icons/star_small_s.png);
			}
			.stu-info .date{
				float: right;
			}
			.stu .stu-evalu{
				margin-top: 5px;
				font-size: 13px;
			}
		</style>	 
	</head>
	<body>
		<div class="content">
			<!-- 场馆星级 -->
			<div class="top">
				<div class="star-level">
					<p>场馆星级</p>
					<p class="stars">
						<span class="star select"></span>
						<span class="star select"></span>
						<span class="star select"></span>
						<span class="star select"></span>
						<span class="star select"></span>
						<span class="grade">5.0</span>
					</p>
				</div>
				<ul class="star-item">
					<li>
						<span class="w">环境</span>
						<span class="stars">
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star"></span>
							<span class="grade">4.5</span>
						</span>
					</li>
					<li>
						<span class="w">服务</span>
						<span class="stars">
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star"></span>
							<span class="grade">4.5</span>
						</span>
					</li>
					<li>
						<span class="w">教学</span>
						<span class="stars">
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star"></span>
							<span class="grade">4.5</span>
						</span>
					</li>
				</ul>
				<span class="b-position">评价(<span class="tot-evalu">5</span>)</span>
			</div>
			<!-- 评价 -->
			<ul class="main">
				<li>
					<div class="stu-avatar">
						<img src="../images/avatar.jpg" alt="">
					</div>
					<div class="stu">
						<p class="stu-info">
							<span class="name">王佳</span>
							<span class="stars">
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
							</span>
							<span class="date">2015.08.18</span>
						</p>
						<p class="stu-evalu">朝阳环境超好，服务也很棒，老师特别专业！</p>
					</div>
				</li>
				<li>
					<div class="stu-avatar">
						<img src="../images/avatar.jpg" alt="">
					</div>
					<div class="stu">
						<p class="stu-info">
							<span class="name">王佳</span>
							<span class="stars">
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
							</span>
							<span class="date">2015.08.18</span>
						</p>
						<p class="stu-evalu">朝阳环境超好，服务也很棒，老师特别专业！</p>
					</div>
				</li>
				<li>
					<div class="stu-avatar">
						<img src="../images/avatar.jpg" alt="">
					</div>
					<div class="stu">
						<p class="stu-info">
							<span class="name">王佳</span>
							<span class="stars">
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
							</span>
							<span class="date">2015.08.18</span>
						</p>
						<p class="stu-evalu">朝阳环境超好，服务也很棒，老师特别专业！</p>
					</div>
				</li>
				<li>
					<div class="stu-avatar">
						<img src="../images/avatar.jpg" alt="">
					</div>
					<div class="stu">
						<p class="stu-info">
							<span class="name">王佳</span>
							<span class="stars">
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
							</span>
							<span class="date">2015.08.18</span>
						</p>
						<p class="stu-evalu">朝阳环境超好，服务也很棒，老师特别专业！</p>
					</div>
				</li>
				<li>
					<div class="stu-avatar">
						<img src="../images/avatar.jpg" alt="">
					</div>
					<div class="stu">
						<p class="stu-info">
							<span class="name">王佳</span>
							<span class="stars">
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
							</span>
							<span class="date">2015.08.18</span>
						</p>
						<p class="stu-evalu">朝阳环境超好，服务也很棒，老师特别专业！</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>